<div>
  <h2 class="euiTitle euiTitle--small">
    Step 1 of 2: Define index pattern
  </h2>

  <div class="euiSpacer euiSpacer--m"></div>

  <form
    name="stepIndexPattern.indexPatternNameForm"
    role="form"
    ng-submit="stepIndexPattern.goToNextStep()"
  >
    <div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--alignItemsFlexEnd euiFlexGroup--responsive">
      <div class="euiFlexItem euiFlexItem--flexGrowZero">
        <div class="euiFormRow">
          <label
            for="indexPatternNameField"
            class="euiFormLabel"
          >
            Index pattern
          </label>
          <div class="euiFormControlLayout">
            <!-- Index pattern input -->
            <input
              id="indexPatternNameField"
              class="euiFieldText euiFieldText--fullWidth createIndexPatternInputField"
              data-test-subj="createIndexPatternNameInput"
              ng-model="stepIndexPattern.indexPatternName"
              placeholder="index-name-*"
              validate-index-pattern
              validate-index-pattern-allow-wildcard
              append-wildcard
              name="name"
              required
              type="text"
              aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
            >
          </div>
          <div class="euiFormHelpText euiFormRow__text">
            <p
              id="indexPatternNameFieldHelp1"
              class="euiTextColor euiTextColor--subdued"
            >
              You can use a <strong>*</strong> as a wildcard in your index pattern.
            </p>
            <div class="euiSpacer euiSpacer--xs"></div>
            <p
              id="indexPatternNameFieldHelp2"
              class="euiTextColor euiTextColor--subdued"
            >
              You can't use empty spaces or the characters <strong>\ / ? " < > |</strong>.
            </p>
          </div>
        </div>
      </div>
      <div class="euiFlexItem euiFlexItem--flexGrowZero">
        <!-- Action -->
        <button
          data-test-subj="createIndexPatternGoToStep2Button"
          class="euiButton euiButton--primary"
          ng-click="stepIndexPattern.goToNextStep()"
          ng-disabled="!stepIndexPattern.canGoToNextStep()"
        >
          <span class="euiButton__content">
            Next step
          </span>
        </button>
      </div>
    </div>
  </form>

  <div class="euiSpacer euiSpacer--m"></div>

  <!-- List of matching indices -->
  <div ng-switch="stepIndexPattern.matchingIndicesListType">
    <div ng-switch-when="invalidIndexPattern">
      <matching-indices-list
        is-loading="stepIndexPattern.isFetchingMatchingIndices"
        indices="stepIndexPattern.allIndices"
        pattern="stepIndexPattern.indexPatternName"
      >
        <span class="euiTextColor euiTextColor--danger">
          <span aria-hidden="true">
            <svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" viewBox="0 0 16 16">
              <g fill="#13252D" fill-rule="evenodd">
                <circle cx="5" cy="5" r="1" />
                <circle cx="10" cy="5" r="1" />
                <path fill-rule="nonzero" d="M7.5 14a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zm0 1a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"
                />
                <path fill-rule="nonzero" d="M12.332 9.626C10.747 8.217 9.133 7.5 7.5 7.5s-3.247.717-4.832 2.126a.5.5 0 1 0 .664.748C4.747 9.116 6.133 8.5 7.5 8.5s2.753.616 4.168 1.874a.5.5 0 0 0 .664-.748z"
                />
              </g>
            </svg>
          </span>

          <span>
            You've entered an invalid index pattern. Please adjust it to match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
          </span>
        </span>
      </matching-indices-list>
    </div>
    <div ng-switch-when="noInput">
      <matching-indices-list
        is-loading="stepIndexPattern.isFetchingMatchingIndices"
        indices="stepIndexPattern.allIndices"
        pattern="stepIndexPattern.indexPatternName"
      >
        <span ng-if="!stepIndexPattern.allIndices.length">
          You only have a single index. You can create an index pattern to match it.
        </span>

        <span ng-if="stepIndexPattern.allIndices.length">
          Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
        </span>
      </matching-indices-list>
    </div>
    <div ng-switch-when="noMatches">
      <matching-indices-list
        is-loading="stepIndexPattern.isFetchingMatchingIndices"
        indices="stepIndexPattern.allIndices"
        pattern="stepIndexPattern.indexPatternName"
      >
        <span>
          The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
        </span>
      </matching-indices-list>
    </div>
    <div ng-switch-when="partialMatches">
      <matching-indices-list
        is-loading="stepIndexPattern.isFetchingMatchingIndices"
        indices="stepIndexPattern.partialMatchingIndices"
        pattern="stepIndexPattern.indexPatternName"
      >
        <span>
          Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
        </span>
      </matching-indices-list>
    </div>
    <div ng-switch-when="exactMatches">
      <matching-indices-list
        is-loading="stepIndexPattern.isFetchingMatchingIndices"
        indices="stepIndexPattern.matchingIndices"
        pattern="stepIndexPattern.indexPatternName"
      >
        <span class="euiTextColor euiTextColor--secondary">
          <span aria-hidden="true">
            <svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
              xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
              <defs>
                <path id="check-a" d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
                />
              </defs>
              <use href="#check-a" />
            </svg>
          </span>

          <span>
            <strong>Success!</strong> Your index pattern matches <strong>{{stepIndexPattern.matchingIndices.length}} {{stepIndexPattern.matchingIndices.length > 1 ? 'indices' : 'index'}}</strong>.
          </span>
        </span>
      </matching-indices-list>
    </div>
  </div>
</div>
